<template>
  <div>
    <!--<el-button @click="新增"></el-button>-->
    <h1>用户，修改，申请成为商家</h1>
    <el-card>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="userId"
          label="id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="userImage"
          label="头像">
          <template slot-scope="scope">
            <el-image :src="scope.row.userImage"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="userPhone"
          label="手机号">
        </el-table-column>
        <el-table-column
          prop="userEmail"
          label="邮箱号">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别">
          <template slot-scope="scope">
            <span v-if="scope.row.sex==1">男</span>
            <span v-if="scope.row.sex==2">女</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄">
        </el-table-column>
        <el-table-column
          prop="userGrade"
          label="积分">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="userDelete(scope.row.userId)">删除</el-button>
            <el-button @click="userUpdate(scope.row.userId)">修改</el-button>
            <span v-if="scope.row.userRole==0"><el-button type="text" @click="userAudit(scope.row.userId)">申请成为商家</el-button></span>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form :model="tbMerchantAuddit" status-icon  label-width="100px" class="demo-ruleForm">
          <el-form-item label="营业执照">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:7000/user/updateFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="tbMerchantAuddit.licenseImage" :src="tbMerchantAuddit.licenseImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="商户名称">
            <el-input v-model="tbMerchantAuddit.merchantName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="userMerchant()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import { userSelect, userUpdate, userDelete,userMerchant } from '@/api/users'
  export default {
    name: 'Index',
    data(){
      return {
        tableData: [],
        dialogVisible: false,
        tbMerchantAuddit:{
          userId:'',
          licenseImage:'',
          merchantName:''
        }
      }
    },
    mounted(){
      this.userSelect()
    },
    methods:{
      userMerchant(){
        this.dialogVisible=false
        console.log(this.tbMerchantAuddit)
        userMerchant(this.tbMerchantAuddit).then((res)=>{
          console.log(res.data)
        })
      },
      userSelect(){
        userSelect().then((res)=>{
          console.log(res.data)
          this.tableData=res.data
        })
      },
      userUpdate(row){
        userUpdate(row,3).then((res)=>{
          this.userSelect()
        })
      },
      userDelete(row){
        userDelete(row).then((res)=>{
          this.userSelect()
        })
      },
      userAudit(row){
        this.dialogVisible=true
        this.tbMerchantAuddit.userId=row
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleAvatarSuccess(res, file) {
        this.tbMerchantAuddit.licenseImage = res
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>


